<template>
	<view class="content">
		<u-navbar title="下单" @rightClick="rightClick" :autoBack="true">
		</u-navbar>
		<!-- 自定义顶部搜索框 用于搜索跳转 skipUrl:跳转url为绝对路径 /pages开头 -->
		<cc-headSearch skipUrl="/pages/index/search"></cc-headSearch>

		<!-- data:商品列表数组[{navtitle:标题 shop:展示列表}] @click:商品条目点击事件-->
		<cc-defineCateList :data="data" @itemClick="cateItemClick" @itemClickadd="itemClickadd"></cc-defineCateList>
		<view class="cardhard">
			<view class="cardhardicon">
				<u-icon name="shopping-cart" size="56" @click="markshow"></u-icon>
			</view>
			<view class="pricesave">
				<view class="">
					￥ {{numprice}}
				</view>
				<view class="saveadd" @click="goorderpay">
					下单
				</view>
			</view>
		</view>
		<view class="markbox" v-show="show">
			<view class="markcard">
				<view class="marktop">
					<view class="markleft">
						<u-icon name="shopping-cart" size="26"></u-icon>
						<text>购物车总览</text>
					</view>
					<view class="markright">
						<u-icon @click="close" name="close" size="20"></u-icon>
					</view>

				</view>
				<view class="markcenter">
					<view class="listitem"   v-if="checkboxList1.length<=0">
							<view class="kongbaox">
								<view class="">
									购物车空空的
								</view>
								<u-icon name="shopping-cart" size="46"></u-icon>
							</view>
						
					</view>
					<view class="listitem"v-for="(item,index) in checkboxList1" :key="index">
						<u-row customStyle="margin-bottom: 10px">
							<u-col span="1">
								<u-checkbox v-model="item.disabled"></u-checkbox>
							</u-col>
							<u-col span="3">
								<image class="imglistitem" :src="item.shopimage" mode=""></image>
							</u-col>
							<u-col span="7">
								<view class="bottomtop">
									<view class="demo-layout bg-purple-dark">{{item.shoptitle}}</view>
									<view class="demo-layout bg-purple-dark">
										<view class="priceadd">
											<view class="price">
												￥{{item.pirce}}
											</view>
											<view class="additem">
												<view class="">
													+
												</view>
												<view class="">
													{{item.num}}
												</view>
												<view class="">
													-
												</view>
											</view>
										</view>
									</view>
								</view>
							</u-col>
						</u-row>
					</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	export default {

		data() {
			return {
				checkboxValue1: [],
				// 基本案列数据
				checkboxList1: [
					 
				],
				numprice: 0,
				show: false,

				// 列表数组 navtitle:标题 shop:展示列表
				data: [{
						navtitle: '精品推荐1',
						shop: [{
								shoptitle: "手机一",
								shopimage: "https://cdn.pixabay.com/photo/2014/08/05/10/27/iphone-410311_1280.jpg",
								pirce: 10,
								num: 0,
								
							},
							{
								shoptitle: "手机二",
								shopimage: "https://cdn.pixabay.com/photo/2015/05/12/09/13/social-media-763731_1280.jpg",
								pirce: 10,
								num: 0,
							},
							{
								shoptitle: "手机三",
								shopimage: "https://cdn.pixabay.com/photo/2016/11/20/08/33/camera-1842202_1280.jpg",
								pirce: 10,
								num: 0,
							},
							{
								shoptitle: "手机四",
								shopimage: "../../static/image/p4.png",
								pirce: 10,
								num: 0,
							}
						]
					},
					{
						navtitle: '手机数码2',
						shop: [{
								shoptitle: "手机一",
								shopimage: "https://cdn.pixabay.com/photo/2014/08/05/10/27/iphone-410311_1280.jpg",
								pirce: 10,
								num: 0,
							},
							{
								shoptitle: "手机二",
								shopimage: "https://cdn.pixabay.com/photo/2015/05/12/09/13/social-media-763731_1280.jpg",
								pirce: 10,
								num: 0,
							},
							{
								shoptitle: "手机三",
								shopimage: "https://cdn.pixabay.com/photo/2016/11/20/08/33/camera-1842202_1280.jpg",
								pirce: 10,
								num: 0,
							},
							{
								shoptitle: "手机四",
								shopimage: "../../static/image/p4.png",
								pirce: 10,
								num: 0,
							}
						]
					},
					{
						navtitle: '声学设备3',
						shop: [{
								shoptitle: "手机一",
								shopimage: "https://cdn.pixabay.com/photo/2014/08/05/10/27/iphone-410311_1280.jpg",
								pirce: 10,
								num: 0,
							},
							{
								shoptitle: "手机二",
								shopimage: "https://cdn.pixabay.com/photo/2015/05/12/09/13/social-media-763731_1280.jpg",
								pirce: 10,
								num: 0,
							},
							{
								shoptitle: "手机三",
								shopimage: "https://cdn.pixabay.com/photo/2016/11/20/08/33/camera-1842202_1280.jpg",
								pirce: 10,
								num: 0,
							},
							{
								shoptitle: "手机四",
								shopimage: "../../static/image/p4.png",
								pirce: 10,
								num: 0,
							}
						]
					},
					{
						navtitle: '精品推荐4',
						shop: [{
								shoptitle: "手机一",
								shopimage: "https://cdn.pixabay.com/photo/2014/08/05/10/27/iphone-410311_1280.jpg",
								pirce: 10,
								num: 0,
							},
							{
								shoptitle: "手机二",
								shopimage: "https://cdn.pixabay.com/photo/2015/05/12/09/13/social-media-763731_1280.jpg",
								pirce: 10,
								num: 0,
							},
							{
								shoptitle: "手机三",
								shopimage: "https://cdn.pixabay.com/photo/2016/11/20/08/33/camera-1842202_1280.jpg",
								pirce: 10,
								num: 0,
							},
							{
								shoptitle: "手机四",
								shopimage: "../../static/image/p4.png",
								pirce: 10,
								num: 0,
							}
						]
					},
					{
						navtitle: '手机数码5',
						shop: [{
								shoptitle: "手机一",
								shopimage: "https://cdn.pixabay.com/photo/2014/08/05/10/27/iphone-410311_1280.jpg",
								pirce: 10,
								num: 0,
							},
							{
								shoptitle: "手机二",
								shopimage: "https://cdn.pixabay.com/photo/2015/05/12/09/13/social-media-763731_1280.jpg",
								pirce: 10,
								num: 0,
							},
							{
								shoptitle: "手机三",
								shopimage: "https://cdn.pixabay.com/photo/2016/11/20/08/33/camera-1842202_1280.jpg",
								pirce: 10,
								num: 0,
							},
							{
								shoptitle: "手机四",
								shopimage: "../../static/image/p4.png",
								pirce: 10,
								num: 0,
							}
						]
					},
					{
						navtitle: '手机数码6',
						shop: [{
								shoptitle: "手机一",
								shopimage: "https://cdn.pixabay.com/photo/2014/08/05/10/27/iphone-410311_1280.jpg",
								pirce: 10,
								num: 0,
							},
							{
								shoptitle: "手机二",
								shopimage: "https://cdn.pixabay.com/photo/2015/05/12/09/13/social-media-763731_1280.jpg",
								pirce: 10,
								num: 0,
							},
							{
								shoptitle: "手机三",
								shopimage: "https://cdn.pixabay.com/photo/2016/11/20/08/33/camera-1842202_1280.jpg",
								pirce: 10,
								num: 0,
							},
							{
								shoptitle: "手机四",
								shopimage: "../../static/image/p4.png",
								pirce: 10,
								num: 0,
							}
						]
					},
					{
						navtitle: '手机数码7',
						shop: [{
								shoptitle: "手机一",
								shopimage: "https://cdn.pixabay.com/photo/2014/08/05/10/27/iphone-410311_1280.jpg",
								pirce: 10,
								num: 0,
							},
							{
								shoptitle: "手机二",
								shopimage: "https://cdn.pixabay.com/photo/2015/05/12/09/13/social-media-763731_1280.jpg",
								pirce: 10,
								num: 0,
							},
							{
								shoptitle: "手机三",
								shopimage: "https://cdn.pixabay.com/photo/2016/11/20/08/33/camera-1842202_1280.jpg",
								pirce: 10,
								num: 0,
							},
							{
								shoptitle: "手机四",
								shopimage: "../../static/image/p4.png",
								pirce: 10,
								num: 0,
							}
						]
					},

				]

			}
		},
		mounted() {

		},
		methods: {
			itemClickadd(item) {
				let index = item.index
				let childindex = item.childindex
				console.log(item.num + 1, this.data[index].shop[childindex])

				this.data[index].shop[childindex].num = item.num + 1
				this.numprice = this.numprice + item.pirce
				this.checkboxList1.push(item)
			},
			cateItemClick(item) {
				let index = item.index
				let childindex = item.childindex
				// console.log(item.num + 1, this.data[index].shop[childindex])

				this.data[index].shop[childindex].num = item.num - 1
				this.numprice = this.numprice - item.pirce
				this.checkboxList1.push(item)
				// uni.showModal({
				//     title: '点击条目',
				//     content: '点击条目数据 = ' + JSON.stringify(item)
				// })
			},
			rightClick() {
				wx.reLaunch({
					url: '/pages/index/index'
				})
			},
			goorderpay() {
				wx.navigateTo({
					url: `/pages/orderpay/orderpay`
				})
			},
			markshow() {
				this.show = true

			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			checkboxChange(n) {
				console.log('change', n);
			}
		}
	}
</script>

<style lang="less" scoped>
	// 条件弹出层

	page {

		background-color: #f7f7f7;
		position: relative;
	}

	.markbox {
		width: 100%;
		height: calc(100vh - 12%);
		position: fixed;
		background: transparent;
		z-index: 2;
	}

	.markcard {
		width: 100%;
		animation: scale 1s ease-in-out forwards;
		;
		border-radius: 20px 20px 0 0;
		background-color: #fff;
		position: absolute;
		bottom: 0;
	}

	.marktop {
		width: 100%;
		padding: 10px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
	}

	.markcenter {
		width: 100%;
		height: calc(350px - 50px);
		background: #fff;
		overflow: scroll;
	}

	.imglistitem {
		width: 60px;
		height: 60px;
		overflow: hidden;
	}
	.bottomtop{
		display: flex;
		flex-direction: column;
	}
	.priceadd{
		display: flex;
		justify-content: space-between;
	}
	.additem{
		display: flex;
	}
	.listitem {
		width: 90%; 
		margin: 0 auto;
	}

	.markleft {
		display: flex;
		align-items: center;
	}

	@keyframes scale {
		from {
			height: 0;
		}

		to {
			height: 350px;
		}
	}

	.content {
		display: flex;
		flex-direction: column;

	}

	.kongbaox{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
	}
	.cardhard {
		width: 100%;
		height: 12%;
		background: #fff;
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20px;
		box-sizing: border-box;
		border-radius: 10px 10px 0 0;
		box-shadow: 1px -1px 1px 0 #ccc;

	}

	.pricesave {
		display: flex;
		align-items: center;
	}

	.saveadd {
		margin-left: 20px;
		width: 80px;
		height: 45px;
		background: orange;
		text-align: center;
		line-height: 45px;
		color: #fff;
		border-radius: 10px;
		box-shadow: 1px 1px 3px 0 #d08d05;
	}
</style>